<script lang="jsx">
import { defineComponent } from "vue";

// 卡片角色类型字段映射
const rolesMap = {
  start: "start", // 发起人
  approve: "approve", // 审批人
  notifier: "notifier", // 抄送人
  condition: "condition", // 条件
  end: "end", // 结束
};
// 角色底色配置
const roles = {
  start: {
    // 发起人
    bgColor: "#576a95",
  },
  approve: {
    // 审批人
    bgColor: "#ff943e",
  },
  notifier: {
    // 抄送人
    bgColor: "#3296fa",
  },

  condition: {
    // 条件
    bgColor: "#fff",
  },
  end: {
    // 结束
    bgColor: "#3296fa",
  },
};

// 流程数据
const data = [
  {
    title: "发起人",
    des: "北京翊博生物集团有限公司old",
    isRoot: true,
    role: roles.start,
    type: rolesMap.start,
    children: [
      {
        des: "时长(天) <= 3",
        title: "条件1",

        role: roles.approve,
        type: rolesMap.condition,

        children: [
          {
            des: "人力资源主管会签left",
            title: "审批人",
            role: roles.approve,
            type: rolesMap.approve,

            children: [
              {
                des: "中国大区市场部",
                title: "抄送人",
                role: rolesMap.notifier,
              },
              // {
              //   title: '北京翊博生物集团有限公司Level03',
              //   des: '抄送人'
              // }
            ],
          },
        ],
      },
      // {
      //   des: '人力资源主管会签right',
      //   title: '审批人',
      //   role: roles.approve,

      //   children: [
      //     {
      //       des: '财务经理会签',
      //       title: '审批人',
      //       role: roles.approve,

      //       children: [
      //         {
      //           des: '中国大区市场部',
      //           title: '抄送人',
      //           role: roles.notifier
      //         }
      //       ]
      //     },
      //     {
      //       des: '财务经理会签',
      //       title: '审批人',
      //       role: roles.approve,

      //       children: [
      //         {
      //           des: '中国大区市场部',
      //           title: '抄送人',
      //           role: roles.notifier
      //         }
      //       ]
      //     }
      //   ]
      // },
      {
        des: "人力资源主管会签right",
        title: "审批人",
        role: roles.approve,
        type: roles.approve,
        children: [
          {
            des: "财务经理会签",
            title: "审批人",
            role: roles.approve,
            type: rolesMap.approve,
            children: [
              {
                des: "中国大区市场部left",
                title: "抄送人",
                role: roles.notifier,
                type: rolesMap.notifier,
              },
              // {
              //   des: '中国大区市场部right',
              //   title: '抄送人',
              //   role: roles.notifier,

              // }
              // {
              //   title: '北京翊博生物集团有限公司Level03',
              //   des: '抄送人'
              // }
            ],
          },
        ],
      },
    ],
  },
];

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: true,
    },
  },

  render() {
    // 点击了描述
    const handleClickTitle = (event) => {
      console.log("click", event.target.getAttribute("title"));
    };
    // 点击了描述
    const handleClickDes = (event) => {
      console.log("click", event.target.getAttribute("des"));
    };
    // 添加条件
    const handleAddCondition = (event) => {
      console.log("handleAdd", JSON.parse(event.target.getAttribute("item")));
    };
    // 添加加号
    const handleAddIcon = (event) => {
      console.log("handleAdd", JSON.parse(event.target.getAttribute("item")));
    };
    // 创建单个卡片
    const creatCard = (item) => {
      console.log("itemxxxxx", item);
      return (
        <div>
          <div
            class="title"
            style={{ background: item.role.bgColor }}
            title={item.title}
            onClick={handleClickTitle}
          >
            {item.title}
          </div>
          {/* 描述 */}
          <div class="des" title={item.des} onClick={handleClickDes}>
            {item.des}
          </div>
        </div>
      );
    };

    // 获取水平线样式
    const getFlatLineStyle = (item, brother) => {
      const styleConfig = {
        2: ["right", "left"],
        3: ["right", "middle", "left"],
      };

      const index = brother.findIndex(
        (_item) => JSON.stringify(item) === JSON.stringify(_item)
      );

      return (
        (styleConfig[brother.length] && styleConfig[brother.length][index]) ||
        ""
      );
    };

    // 创建卡片节点
    const createNode = (item, brother) => {
      const { isRoot } = item; // 是否是根节点

      const flatLineStyle = getFlatLineStyle(item, brother); // 水平线的样式

      return (
        <div class="item">
          {/* 连线上箭头:水平线 */}
          {/* <div class={`flat-line ` + flatLineStyle} v-show={brother.length > 1}></div> */}
          {/* 连线上箭头:坚线 */}
          <div class="top-line" v-show={!isRoot}></div>
          {/* 角色 */}
          {creatCard(item)}
          {/* 连线下箭头 */}
          <div class="bottom-line">
            {/* 加号 */}
            <div
              class="add-btn-icon"
              item={JSON.stringify(item)}
              onClick={handleAddIcon}
            >
              +
            </div>
            <div class="triangle"></div>
            {/* 添加条件按钮 */}
            <div
              class="add-btn"
              item={JSON.stringify(item)}
              onClick={handleAddCondition}
            >
              添加条件
            </div>
          </div>
        </div>
      );
    };

    const createDoms = (data) => {
      return data.map((item) => {
        if (item.children) {
          const { isRoot } = item;

          const flatLineStyle = getFlatLineStyle(item, data);

          return (
            <div
              class={
                `wrap-item` + item.children.length > 1 ? "margin-top-20" : ""
              }
              key={item.title}
            >
              <div class="wrap-parent">
                {/* 连线上箭头:水平线 */}
                <div
                  class={`flat-line ` + flatLineStyle}
                  v-show={data.length > 1}
                ></div>
                {createNode(item, data)}
              </div>
              <div class="wrap-children">{createDoms(item.children)}</div>
            </div>
          );
        }
        return createNode(item, data);
      });
    };

    const result = createDoms(data);

    const createEnd = () => {
      const config = {
        des: "流程结束",
        title: "办结",
        role: roles.approve,
      };
      return (
        <div class="wrap-parent">
          <div class="item end-card-wrap">
            {/* 连线上箭头:水平线底部 */}
            <div class={`flat-line-bottom left`}></div>
            <div class={`flat-line-bottom right`}></div>

            {/* 连线下箭头 */}
            <div class="bottom-line end-card">
              {/* 加号 */}
              <div
                class="add-btn-icon"
                item={JSON.stringify(config)}
                onClick={handleAddIcon}
              >
                +
              </div>
              <div class="triangle"></div>
            </div>

            {creatCard(config)}
          </div>
        </div>
      );
    };
    console.log("result", result);

    return result.concat(createEnd());
  },
});
</script>
<!-- 
<style scoped lang="scss">
@boxHeight: 80px; // 盒子高
@boxWidth: 220px; // 盒子宽
@titleHeight: 25px; // 标题高度
@lineColor: #ccc; // 连线颜色
@top-line-height: 30px; // 顶部线高
@bottom-line-height: 90px; // 底部线高

.wrap-parent,
.wrap-children {
  display: flex;
  justify-content: center;
  // 水平线
  .flat-line {
    height: 1px;
    // width: 110px + 55px;
    width: 100%;
    background-color: @lineColor;
    position: absolute;
    // z-index: 10;

    top: -10px;
    &.right {
      left: 50%;
    }
    &.left {
      right: 50%;
    }
    &.middle {
      left: -65px;
    }
  }

  .title {
    font-size: 12px;
    height: @titleHeight;
    line-height: 25px;
    background-color: #576a95;
    border-radius: 5px 5px 0 0;
    color: #fff;
    padding-left: 10px;
  }
  .des {
    height: @boxHeight - @titleHeight;
    background-color: white;
    padding: 10px;
    border-radius: 0 0 5px 5px;
  }
  .item {
    width: @boxWidth;
    height: @boxHeight;
    border-radius: 5px;
    border: 1px solid @lineColor;
    box-shadow: 0px 3px 5px @lineColor;
    margin-bottom: @bottom-line-height;
    margin-left: 60px;
    margin-right: 60px;
    position: relative;
    margin-top: 20px;
    &.end-card-wrap {
      margin-top: @bottom-line-height - 10px;
    }
    .flat-line {
      top: -30px;
    }

    .top-line {
      height: @top-line-height;
      width: 1px;
      background-color: red;
      position: absolute;
      left: 50%;
      top: -@top-line-height;
      z-index: 0;
      position: absolute;
    }

    .bottom-line {
      height: @bottom-line-height;
      width: 1px;
      background-color: @lineColor;
      position: absolute;
      left: 50%;
      z-index: 10;

      &.end-card {
        top: -@bottom-line-height;
      }
      .triangle {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid @lineColor;
        position: absolute;
        bottom: 0;
        left: -4px;
      }
      .add-btn {
        width: 80px;
        height: 30px;
        line-height: 30px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 3px 5px @lineColor;
        text-align: center;
        color: #277ace;
        font-size: 12px;
        left: -40px;
        position: absolute;
        bottom: -5px;
        z-index: 10;
        cursor: pointer;
      }
      .add-btn-icon {
        @size: 26px;
        width: @size;
        height: @size;
        line-height: @size - 4;
        border-radius: 50%;
        background-color: #3296fa;
        color: white;
        text-align: center;
        font-size: @size;
        padding: 0;
        position: absolute;
        left: -13px;
        top: 20px;
        cursor: pointer;
      }
    }
  }
}
.wrap-parent {
  position: relative;
  .next-line {
    height: 1px;
    width: 110px + 55px;
    background-color: @lineColor;
    position: absolute;
    // z-index: 10;
    right: 50%;
    bottom: 0;
    .stand-line {
      position: absolute;
      height: 20px;
      width: 1px;
      background-color: @lineColor;
    }
    &.next-line-2-right {
      left: 50%;
      .stand-line {
        right: 0;
      }
    }
  }
}
.margin-top-20 {
  // margin-top: 20px;
}
.flat-line-bottom {
  width: 110px + 55px;

  background-color: @lineColor;
  height: 1px;
  position: absolute;
  top: -@bottom-line-height;
  &.left {
    left: 50%;
  }
  &.right {
    right: 50%;
  }
}
</style> -->
